<template>
	<view class="box">
		<view class="carText">车辆名称</view>
		<view class="carName">{{ carNo }}</view>
		<view class="carBox-img">
			<image class="carImg" :src="imgUrl | mmvImageUrl" mode="aspectFill"></image>
		</view>
		<view class="operate">
			<view class="operate-child" v-if="electric >= 20 && batteryLevel">
				<image class="carImg" src="../../static/other/icon_electric_on.png"></image>
				<text v-if="batteryType == '1'"> 电量:{{ batteryLevel }} % </text>
				<text v-if="batteryType == '0'"> 电量:{{ batteryLevel }} 千瓦 </text>
			</view>
			<view class="operate-child" v-if="electric < 20 && batteryLevel">
				<image class="carImg" src="../../static/other/icon_electric_off.png"></image>
				<text v-if="batteryType == '1'"> 电量:{{ batteryLevel }} % </text>
				<text v-if="batteryType == '0'"> 电量:{{ batteryLevel }} 千瓦 </text>
			</view>
			<view class="operate-child" v-if="fuelType !== null">
				<image class="carImg" src="../../static/other/icon_oil_off.png"></image>
				<text v-if="fuelType == '1'"> 油量:{{ electric }} % </text>
				<text v-if="fuelType == '0'"> 油量:{{ electric }} 升 </text>
			</view>
			<view class="operate-child" @click="goNavi">
				<image class="carImg" src="../../static/other/icon_location_on.png"></image>
				<text> 位置 </text>
			</view>
		</view>
		<view class="lock-box">
			<view class="lock-box-child">
				<view class="img-box" @click="operateCar(0)">
					<image
						class="carImg"
						v-if="lockStatus"
						src="../../static/other/icon_unlocking_on.png"></image>
					<image class="carImg" v-else src="../../static/other/icon_unlocking_on.png"></image>
				</view>
				<view>开锁</view>
			</view>
			<view class="vertical-bar"></view>
			<view class="lock-box-child">
				<view class="img-box" @click="operateCar(1)">
					<image
						class="carImg"
						v-if="onlockStatus"
						src="../../static/other/icon_trunk_on.png"></image>
					<image class="carImg" v-else src="../../static/other/icon_lock_off.png"></image>
				</view>
				<view>上锁</view>
			</view>
			<view class="vertical-bar"></view>
			<view class="lock-box-child">
				<view class="img-box" @click="operateCar(2)">
					<image
						class="carImg"
						v-if="onTrunkStatus"
						src="../../static/other/icon_trunk_ona.png"></image>
					<image class="carImg" v-else src="../../static/other/icon_trunk_off.png"></image>
				</view>
				<view>开后备箱</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { constant } from "lodash";
	import * as api from "@/api/order-api.js";
	export default {
		components: {},
		data() {
			return {
				batteryLevel: null,
				batteryType: null,
				fuelType: 0,
				electric: null,
				signImage: "",
				carNo: "",
				imgUrl: "",
				accessoryItems: [],
				fuelCapacity: 0,

				lockStatus: true,
				onlockStatus: true,
				onTrunkStatus: true,
				storeInfo: {
					lat: "",
					lon: "",
					storeName: "",
					addrDetail: "",
				},
				deviceNo: "",
			};
		},
		computed: {},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.carNo = this.order.carNo;
			this.carId = this.order.carId;
			this.getCarCommand();
			this.carOilQuantity();
		},
		methods: {
			//获取设备
			getCarCommand() {
				api.getCarOilQuantity(this.order.carId).then((res) => {
					if (res.data) {
						this.deviceNo = res.data.deviceNo;
						this.imgUrl = res.data.imgUrl;
					}
				});
			},
			// 获取车辆定位信息
			getCarLoaction() {
				api.getCarLoation(this.deviceNo).then((res) => {
					if (res.data) {
						this.storeInfo = res.data;
					}
				});
			},
			goNavi() {
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude: Number(this.storeInfo.lat),
					longitude: Number(this.storeInfo.lon),
					address: this.storeInfo.addrDetail,
					success() {
						console.log("成功了");
					},
					fail(msg) {
						console.log(msg);
					},
				});
			},
			operateCar(type) {
				if (this.deviceNo) {
					api.vehiclekeyCommand({ deviceNo: this.deviceNo, instId: type }).then((res) => {
						if (res.code == 200) {
							if (type == 0) {
								this.lockStatus = false;
								setTimeout(() => {
									this.lockStatus = true;
								}, 1000);
							} else if (type == 1) {
								this.onlockStatus = false;
								setTimeout(() => {
									this.onlockStatus = true;
								}, 1000);
							} else if (type == 2) {
								this.onTrunkStatus = false;
								setTimeout(() => {
									this.onTrunkStatus = true;
								}, 1000);
							}
							this.$u.toast("操作成功");
						} else {
							this.$u.toast(res.msg);
						}
					});
				}
			},
			carOilQuantity() {
				api.car_oil(this.order.carId).then((res) => {
					if (res.data) {
						this.electric = res.data.fuelLevel;
						this.storeInfo = res.data;
						this.fuelType = res.data.fuelType;
						this.batteryLevel = res.data.batteryLevel;
						this.batteryType = res.data.batteryType;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/helang-table.scss";
	.box {
		width: 100%;
		background: linear-gradient(to bottom, #d9e2ef, #f5f5f5);
		padding-top: 20px;
		.carText {
			font-size: 16px;
			font-weight: 600;
			margin-left: 20px;
			margin-bottom: 10px;
			color: #333333;
		}

		.carName {
			width: 90px;
			text-align: center;
			border: 1px solid #95caff;
			color: #333333;
			padding: 3px;
			margin-left: 20px;
			margin-bottom: 25px;
			font-size: 14px;
		}
		.carBox-img {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 40px;
			.carImg {
				margin: 0 auto;
				width: 90%;
				height: 220px;
				border-radius: 5px;
			}
		}
		.operate {
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			.operate-child {
				display: flex;
				align-items: center;
				padding: 5px 10px;
				background-color: #ffffff;
				border-radius: 2px;
				.carImg {
					display: inline-block;
					width: 20px;
					height: 20px;
					margin-right: 5px;
				}
			}
		}
		.lock-box {
			width: 90%;
			margin: 20px auto;
			background-color: #ffffff;
			border-radius: 5px;
			display: flex;
			justify-content: space-around;
			.lock-box-child {
				width: 30%;
				height: 90px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;
				.img-box {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid rgba(0, 26, 64, 0.1);
					margin-bottom: 8px;
					.carImg {
						display: inline-block;
						width: 30px;
						height: 30px;
					}
				}
			}
			.vertical-bar {
				height: 75px;
				width: 2px;
				background-color: #e6e7e9;
				margin-top: 8px;
			}
		}
	}
</style>
